<template>
    <div>
        <div class="container" style="font-size: 13px;background-color: white">
            <el-row>
               <el-col>
                   <!--搜索-->
                   <div style="margin-top: 20px;margin-left: 10px">
                       <span>1.请选择查看数据：</span>
                       <el-select size="small" v-model="prosss" @change="mybusdatachange" clearable placeholder="请选择">
                           <el-option
                                   v-for="item in options"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item">
                           </el-option>
                       </el-select>
                       <el-select style="margin-left: 10px" @change="changeCensus" size="small" v-model="monthselect" clearable placeholder="请选择">
                           <el-option
                                   v-for="item in monthoptions"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item">
                           </el-option>
                       </el-select>
                   </div>
               </el-col>
           </el-row>
            <el-row>
                <div style="margin-top: 80px;margin-left: 10px">
                    <span>2.查看数据：</span>
                </div>
            </el-row>
            <el-row>
                <el-col>
                    <div style="width: 1000px;margin: 0 auto;margin-top: 20px">
                        <el-table
                                :data="buslist"
                                style="width: 100%"
                                height="330"
                                :default-sort = "{prop: 'date', order: 'descending'}"
                                ><!--
                                @selection-change="handleSelectionChange"
                            <el-table-column
                                    type="selection"
                                    prop="busId"
                                    align="center">
                            </el-table-column>-->
                            <el-table-column
                                    fixed
                                    prop="busNo"
                                    label="商机编号"
                                    sortable
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    fixed
                                    label="商机名称"
                                    sortable
                                    align="center">
                                <template slot-scope="sp">
                                    <a v-html="sp.row.busName" class="businame" @click="todetails(sp.row)"></a>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="busPeople"
                                    label="负责人"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="phase.phaseName"
                                    label="阶段"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    label="建立时间"
                                    sortable
                                    align="center">
                                <template slot-scope="d">
                                    {{d.row.busSettime | formatDate}}
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination
                                @current-change="handleCurrentChange"
                                @size-change="handleSizeChange"
                                height="90"
                                align="center"
                                :current-page="currentPage"
                                :page-sizes="sizes"
                                :page-size="pagesize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="pagetotal"
                        />

                    </div>
                </el-col>
            </el-row>
            <el-row>
                <div style="margin-top: 80px;margin-left: 10px">
                    <span>3.视图：</span>
                </div>
            </el-row>
            <el-row :gutter="20"  style="text-align: center;margin-top: 10px;background-color: white;margin-left: 0px;margin-right: 0px">
                <el-col :span="12">

                    <!--折线图-->
                    <div style="margin-right: 120px">
                        <span>商机机会数量视图</span>
                    </div>
                    <ve-line :data="businessFindMonth"></ve-line>

                    </el-col>
                <el-col :span="12">
                    <!--漏斗-->
                    <span>各阶段机会视图</span>
                    <ve-funnel :data="phasedatas" :settings="phasechartSettings"></ve-funnel>
                </el-col>
            </el-row>
            <el-row :gutter="20"  style="text-align: center;margin-top: 10px;background-color: white;margin-left: 0px;margin-right: 0px">
               <el-col :span="12">
                   <!--饼状图-->
                   <span>商机预期金额视图</span>
                   <div ref="binzmoney" style="height: 500px">
                   </div>

                  </el-col>
               <el-col :span="12">
                   <!--地图-->
                   <span>各地区数量视图</span>
                   <ve-map style="width: 500px" :data="chartData" :settings="chartSettings" :events="chartEvents"></ve-map>

               </el-col>
           </el-row>
        </div>

    </div>
</template>

<script>

    import {formatTimeToStr} from '../router//format.js'
    import '../../node_modules/echarts/map/js/china.js' // 引入中国地图数据
    export default {
        name: 'SaDateVie',
        data(){
            this.chartSettings = {
                position: 'china',
                // selectData: true,
                selectedMode: 'single'
            }
            this.chartEvents = {
                click: (v) => {
                    this.cityName = v.name
                }
            }
            this.phasechartSettings = {
                sequence: ['初期沟通', '深度接触', '方案设计', '报价','商务谈判','签单']
            }

            return{

                zhexiansetdata:[],//折线图封装数据

                /*分页数据*/
                pagesize:6,//页大小
                currentPage:1,//当前页
                pagetotal:0,//总页数
                sizes:[6,8,10,12],//每页数据条

                moneylist:[],//预期金额数据

                cityName: '',
                chartData: {
                    columns: ['name', 'value'],
                    rows: []
                },

                earelist:[],//地区数据

                phasedatas:{
                    columns: ['name', 'value'],
                    rows: [
                    ]
                },//阶段数据

                monthselect:{value:1,
                label:'本季度机会数量'},//机会数量选择

                monthoptions:[{
                    value:1,
                    label:'本季度机会数量'
                },{
                    value:2,
                    label:'本年份机会数量'
                },{
                    value:3,
                    label:'过去年份（5年）机会数量'
                }],//柱形图下拉框
/*
                businessFindMonth:[],//柱形图月份
                businessFindCount:[],//柱形图月份大小*/

                businessFindMonth: {
                    columns: ['日期', '商机数量'],
                    rows: [
                    ]
                },//折线图
                options: [{
                    value: '1',
                    label: '我的商机'
                }, {
                    value: '2',
                    label: '可查看商机'
                }],

                /*搜索负责人数据*/
                prosss:{
                    value: '1',
                    label: '我的商机'
                },
                //表格
                buslist: [],
            }

        },
        mounted () {
            setTimeout(()=>{this.four()},500);
        },
        created() {
            this.selectByQUARTERMonthSize();
            this.tablelist();
            this.selectBySheng();
            this.selectByphase();
            this.selectByMoney();
        },
        filters: {
            formatDate: function (time) {
                if (time != null && time != "") {
                    var date = new Date(time);
                    return formatTimeToStr(date, "yyyy-MM-dd");
                } else {
                    return "";
                }
            }
        },
        methods:{

            /*我的商机数据切换*/
            mybusdatachange(){//我的数据

                this.currentPage = 1;
                this.pagesize = 6;
                if(this.prosss.value == 1) {
                    this.tablelist();//表格
                    this.selectByQUARTERMonthSize();//折线图
                    this.selectByphase();//漏斗数据
                    this.selectBySheng();//地图
                    this.selectByMoney();//饼状图

                }else{//我可查看数据
                    this.tablelistmyall();//表格
                    this.selectByQUARTERMonthSizemyall();//折线图
                    this.selectByphasemyall();//漏斗数据
                    this.selectByShengmyall();//地图
                    this.selectByMoneymyall();//饼状图

                }
            },

            /*我的商机表格过去5年数据*/
            tablelistYearFive(){
                this.$axios.post("http://localhost:8088/busstati/selectByFiveYearData",this.qs.stringify(
                    {currentpage:this.currentPage,pagesize:this.pagesize,}
                ))
                    .then((v)=>{
                        this.buslist = v.data.rows;
                        this.pagetotal=v.data.total;
                    }).catch(()=>{
                });
            },

            /*我的商机表格本年份数据*/
            tablelistYear(){
                this.$axios.post("http://localhost:8088/busstati/selectByYearData",this.qs.stringify(
                    {currentpage:this.currentPage,pagesize:this.pagesize,}
                ))
                    .then((v)=>{
                        this.buslist = v.data.rows;
                        this.pagetotal=v.data.total;
                    }).catch(()=>{
                });
            },

            /*我的商机表格本季度数据*/
            tablelist(){
                this.$axios.post("http://localhost:8088/busstati/selectByQUARTERData",this.qs.stringify(
                    {currentpage:this.currentPage,pagesize:this.pagesize,}
                ))
                    .then((v)=>{
                        this.buslist = v.data.rows;
                        this.pagetotal=v.data.total;
                    }).catch(()=>{
                });
            },
            /*我可查看表格本季度数据*/
            tablelistmyall(){
                this.$axios.post("http://localhost:8088/busstati/selectByQUARTERDatamyall",this.qs.stringify(
                    {currentpage:this.currentPage,pagesize:this.pagesize,}
                ))
                    .then((v)=>{
                        this.buslist = v.data.rows;
                        this.pagetotal=v.data.total;
                    }).catch(()=>{
                });
            },
            /*当前页方法*/
            handleCurrentChange(val) {
                window.console.log(`当前页: ${val}`);
                this.currentPage=val;

                if(this.prosss.value==1){
                    if(this.monthselect.value==1){
                        //商机发现时间数量按季度统计
                        this.tablelist();
                    }else if(this.monthselect.value==2){
                        //商机发现时间数量按年统计
                        this.tablelistYear();
                    }else if(this.monthselect.value==3){
                        this.tablelistYearFive();
                    }
                }else if(this.prosss.value==2){
                    if(this.monthselect.value==1){
                        //商机发现时间数量按季度统计
                        this.tablelistmyall()
                    }
                }



            },
            /*分页数方法*/
            handleSizeChange(val) {
                window.console.log(`每页 ${val} 条`);
                this.pagesize=val;
                if(this.prosss.value==1){
                    if(this.monthselect.value==1){
                        //我的商机发现时间数量按季度统计
                        this.tablelist();
                    }else if(this.monthselect.value==2){
                        //商机发现时间数量按年统计
                        this.tablelistYear();
                    }else if(this.monthselect.value==3){
                        this.tablelistYearFive();
                    }

                }else if(this.prosss.value==2){
                    if(this.monthselect.value==1){
                        //我可查看商机发现时间数量按季度统计
                        this.tablelistmyall();
                    }
                }


            },

            /*折线图我的数据本年数据*/
            selectByMonthSize(){
                this.$axios.post("http://localhost:8088/busstati/selectByMonthSize")
                    .then((v)=>{
                        this.businessFindMonth.rows = v.data;
                    }).catch(()=>{
                });
            },

            /*折线图我可查看商机本年数据*/
            selectByMonthSizemyall(){
                this.$axios.post("http://localhost:8088/busstati/selectByMonthSizemyall")
                    .then((v)=>{
                        this.businessFindMonth.rows = v.data;
                    }).catch(()=>{
                });
            },

            /*折线图我的数据本季度数据*/
            selectByQUARTERMonthSize(){
                this.$axios.post("http://localhost:8088/busstati/selectByQUARTERMonthSize")
                    .then((v)=>{
                        this.businessFindMonth.rows = v.data;
                    }).catch(()=>{
                });
            },

            /*折线图我可查看商机本季度数据*/
            selectByQUARTERMonthSizemyall(){
                this.$axios.post("http://localhost:8088/busstati/selectByQUARTERMonthSizemyall")
                    .then((v)=>{
                        this.businessFindMonth.rows = v.data;
                    }).catch(()=>{
                });
            },


            /*折线图我的商机过去5年数据*/
            selectByyearfiveSize(){
                this.$axios.post("http://localhost:8088/busstati/selectByyearfiveSize")
                    .then((v)=>{
                        this.businessFindMonth.rows = v.data;
                    }).catch(()=>{
                });
            },


            /*折线图我可查看过去5年数据*/
            selectByyearfiveSizemyall(){
                this.$axios.post("http://localhost:8088/busstati/selectByyearfiveSizemyall")
                    .then((v)=>{
                        this.businessFindMonth.rows = v.data;
                    }).catch(()=>{
                });
            },

            /*我的商机阶段数据*/
            selectByphase(){
                this.$axios.post("http://localhost:8088/busstati/selectByphase")
                    .then((v)=>{
                        this.phasedatas.rows = v.data;
                    }).catch(()=>{
                });
            },


            /*我可查看商机阶段数据*/
            selectByphasemyall(){
                this.$axios.post("http://localhost:8088/busstati/selectByphasemyall")
                    .then((v)=>{
                        this.phasedatas.rows = v.data;
                    }).catch(()=>{
                });
            },

            /*我的商机地图统计*/
            selectBySheng(){
                this.$axios.post("http://localhost:8088/busstati/selectBySheng")
                    .then((v)=>{
                        this.chartData.rows = v.data;
                    }).catch(()=>{
                });
            },
            /*我可查看商机地图统计*/
            selectByShengmyall(){
                this.$axios.post("http://localhost:8088/busstati/selectByShengmyall")
                    .then((v)=>{
                        this.chartData.rows = v.data;
                    }).catch(()=>{
                });
            },

            /*我的商机预期金额统计*/
            selectByMoney(){
                this.moneylist = [];
                this.$axios.post("http://localhost:8088/busstati/selectByMoney")
                    .then((v)=>{
                        var one = v.data[0].one;
                        var two = v.data[0].two;
                        var three = v.data[0].three;
                        var four = v.data[0].four;
                        var five = v.data[0].five;

                        var one1 = {
                            name:'<10W',
                            value:one
                        }
                        var two1 = {
                            name:'10W~50W',
                            value:two
                        }
                        var three1 = {
                            name:'50W~100W',
                            value:three
                        }
                        var four1 = {
                            name:'100W~500W',
                            value:four
                        }
                        var five1 = {
                            name:'>500W',
                            value:five
                        }

                        this.moneylist.splice(0,0,one1)
                        this.moneylist.splice(0,0,two1)
                        this.moneylist.splice(0,0,three1)
                        this.moneylist.splice(0,0,four1)
                        this.moneylist.splice(0,0,five1)
                    }).catch(()=>{
                });
            },

            /*我可查看商机统计金额*/
            selectByMoneymyall(){
                this.moneylist = [];
                this.$axios.post("http://localhost:8088/busstati/selectByMoneymyall")
                    .then((v)=>{
                        var one = v.data[0].one;
                        var two = v.data[0].two;
                        var three = v.data[0].three;
                        var four = v.data[0].four;
                        var five = v.data[0].five;

                        var one1 = {
                            name:'<10W',
                            value:one
                        }
                        var two1 = {
                            name:'10W~50W',
                            value:two
                        }
                        var three1 = {
                            name:'50W~100W',
                            value:three
                        }
                        var four1 = {
                            name:'100W~500W',
                            value:four
                        }
                        var five1 = {
                            name:'>500W',
                            value:five
                        }

                        this.moneylist.splice(0,0,one1)
                        this.moneylist.splice(0,0,two1)
                        this.moneylist.splice(0,0,three1)
                        this.moneylist.splice(0,0,four1)
                        this.moneylist.splice(0,0,five1)
                    }).catch(()=>{
                });
            },

            //切换统计本年
            changeCensus(){
                if(this.monthselect.value==1){
                    //商机发现时间数量按季度统计
                    this.tablelist();
                }else if(this.monthselect.value==2){
                    //商机发现时间数量按年统计
                    this.selectByMonthSize();
                    this.tablelistYear();
                }else if(this.monthselect.value==3){
                    this.selectByyearfiveSize();
                    this.tablelistYearFive();
                }
            },

            /*全选方法*/
            handleSelectionChange(){

            },

            four(){
                var data = this.moneylist;
                let myChart = this.$echarts.init(this.$refs.binzmoney);
                //绘制
                myChart.setOption({
                    backgroundColor: '#fff',
                    title: {
                        text: '预期金额',
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            fontWeight: 'normal',
                            fontSize: 16
                        }
                    },
                    tooltip: {
                        show: true,
                        trigger: 'item',
                        formatter: "{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'horizontal',
                        bottom: '0%',
                        data: ['<10w', '10w-50w', '50w-100w', '100w-500w', '>500w']
                    },
                    series: [{
                        type: 'pie',
                        selectedMode: 'single',
                        radius: ['25%', '58%'],
                        color: ['#86D560', '#AF89D6', '#59ADF3', '#FF999A', '#FFCC67'],

                        label: {
                            normal: {
                                position: 'inner',
                                formatter: '{d}%',

                                textStyle: {
                                    color: '#fff',
                                    fontWeight: 'bold',
                                    fontSize: 14
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: data
                    }, {
                        type: 'pie',
                        radius: ['58%', '83%'],
                        itemStyle: {
                            normal: {
                                color: '#F2F2F2'
                            },
                            emphasis: {
                                color: '#ADADAD'
                            }
                        },
                        label: {
                            normal: {
                                position: 'inner',
                                formatter: '{c}个',
                                textStyle: {
                                    color: '#777777',
                                    fontWeight: 'bold',
                                    fontSize: 14
                                }
                            }
                        },
                        data: data
                    }]
                });
            },
        },
        watch:{


        },
    }
</script>

<style scoped>
    .container{
        background: white;
        width:100%;
        border-radius: 5px;
    }

    #main2{
        border:0px solid rebeccapurple;
        width: 50%;
        height: 500px;
        margin-left: 5px;
        padding-top: 30px;
    }
</style>
